<template>
  <div class="container">
    <van-search
      :value='searchVal'
      background="white"
      placeholder="配送单号"
      @change="onChangeVal"
      @search="onSearch"
      >
    </van-search>
    <div class="tabs-box">
      <van-tabs :active="activeIndex" @change="tabClick" color="#ff590a">
        <van-tab :title="item" v-for="(item, index) in tabs" :key="index"></van-tab>
      </van-tabs>
    </div>
    <div>
      <div v-for="(item, index) in orderList" :key="index" class="mar-t-12" @click="goDetail(item)">
        <div class="height-47 flex flex-between pad-l-15 pad-r-15 bc-color-w">
          <div class="flex flex-between">
            <span class="font-15 font-color-6">配送单号：{{item.deliveryNo}}</span>
            <span class="copy-btn mar-l-6" @click="$pt.setClipboardData({data: item.deliveryNo})">复制</span>
          </div>
          <div :class="'fontcolor--' + activeIndex">{{ deliveryStatus[item.deliveryStatus] }}</div>
        </div>
        <div class="pad-l-25 pad-r-25 goods-box">
          <div class="flex pad-t-8 pad-b-8 goods-detail" v-for="(good, ind) in item.deliveryDetails"  :key="ind">
            <div class="mar-r-10">
              <img v-if="good.goodsImageUrl" :src="good.goodsImageUrl" class="width-90 height-90"/>
            </div>
            <div class="flex-item">
              <div class="flex">
                <div class="flex-item">
                  <div class="goods-title line-2 mar-b-4">{{good.goodsTitle}}</div>
                  <div class="goods-prop font-color-8 line-1 font-10" v-if="good.skuDetail">{{good.skuDetail}}</div>
                  <div class="height-20" v-else></div>
                  <div class="flex line-h-1 font-12 mar-t-18">
                    <div class="font-black">共{{good.goodsNum}}件</div>
                    <div v-if="activeIndex === 2" class="mar-l-8 color-all">已签收{{good.goodsNum}}件</div>
                  </div>
                </div>            
              </div>
            </div>
          </div>
        </div>
        <div class="bc-color-w expend-icon-box">
          <div class="img-box height-40">
            <img v-if="fileSpace" :src="fileSpace + '/images/mygroupbuy-icon-arrow-down.png'" class="width-16 height-18"/>
          </div>
        </div>
        <div class="btn-box pad-r-25 bc-color-w">
          <button class="detail-btn font-color-8">查看详情</button>
        </div>
      </div>
      <div class="pad-10 mar-t-10 align-c" v-if="orderList.length===0 && isNoData">
        <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 mar-t-30"
             :src="fileSpace + '/images/2-0-kong.png'"/>
        <div class="pad-t-20 font-14 font-gray">空空如也</div>
      </div>
    </div>
  </div>
</template>

<script>
import { pagingDelivery, updateCommanderRead } from '@/api/home'
export default {
  data() {
    return {
      searchVal: '', // 搜索内容
      activeIndex: 0,
      tabs: ['待配送', '待签收', '已签收'],
      orderStatusList: {
        10: 0, // 待配送
        20: 1, // 待签收
        30: 2, // 已签收
        0: 10,
        1: 20,
        2: 30
      },
      deliveryStatus: {
        10: '待配送',
        20: '待签收',
        30: '已签收'
      },
      orderList: [], // 订单列表
      isNoData: false, // 是否空数据
      params: {
        memberId: '',
        deliveryStatus: '',
        deliveryNo: '',
        size: 10,
        currentPage: 1
      },
      pullLoad: {
        loading: false,
        finished: false
      },
      status: 0
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  mounted() {
    this.status = this.getCurrentPage().query.deliveryStatus // 订单状态
    this.activeIndex = this.orderStatusList[this.status] // 选中的tab
    this.params.deliveryStatus = this.orderStatusList[this.activeIndex] // 请求订单类型改变
    this.params.memberId = this.getCustomerId
    this.params.currentPage = 1
    this.orderList = []
    this.pageinit()
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageinit()
    }
  },
  methods: {
    pageinit() {
      this.isNoData = false
      this.pullLoad.finished = false
      this.params.deliveryNo = this.searchVal
      pagingDelivery(this.params).then(response => {
        if (response.isError) return
        response.data.records.forEach(item => {
          this.orderList.push(item)
        })
        if (this.orderList.length === 0) {
          this.isNoData = true
        }
        this.params.currentPage++
        if (this.orderList.length === 0 || this.orderList.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      })
      if (this.activeIndex === 2) {
        let params = {
          memberId: this.getCustomerId,
          deliveryStatus: 30
        }
        updateCommanderRead(params).then(response => {
        })
      }
    },
    onSearch(e) {
      // 搜索事件
      this.searchVal = e.mp.detail
      this.params.currentPage = 1
      this.orderList = []
      this.pageinit()
    },
    tabClick(e) {
      // tab标签改变事件
      this.activeIndex = e.mp.detail.index
      this.params.deliveryStatus = this.orderStatusList[this.activeIndex] // 请求订单类型改变
      this.params.currentPage = 1
      this.orderList = []
      this.params.deliveryNo = '' // 切换tab的时候将搜索内容清空
      this.searchVal = '' // 切换tab的时候将搜索内容清空
      this.pageinit()
    },
    goDetail(item) {
      this.$pt.navigateTo({url: '/pages/home/delivery-list/detail/main?deliveryId=' + item.deliveryId})
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  /deep/ .van-cell{
    border-radius: 15px;
    background: #f4f4f4;
  }
  .copy-btn{
    border-radius: 3px;
    border: 1px solid #dadada;
    padding: 2px 4px;
    font-size: 10px;
    color: #aeaeae;
  }
  .bc-color-w{
    background: white;
  }
  .fontcolor--10{
    color: #ff590a;
  }
  .fontcolor--20{
    color: #0eaeff;
  }
  .fontcolor--30{
    color: #04c160;
  }
  .color-all{
    color: #04c160;
  }
  .line-h-1{
    line-height: 1;
  }
  .goods-box{
    // height: 218px;
    overflow-y: hidden;
    .goods-detail{
      border-bottom: 1px solid #e9e9e9;
      &:last-child{
        border-bottom: unset;
      }
    }
    .goods-prop{
      background: #e7e7e7;
      height: 20px;
      line-height: 20px;
    }
    .goods-title {
      font-size: 14px;
      height: unset;
      line-height: 1.4;
    }
  }
  .expend-icon-box{
    .img-box{
      margin: 0 25px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #f3f3f3;
    }
  }
  .btn-box{
    height: 45px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .detail-btn{
      margin: unset;
      width: 75px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #dadada;
      border-radius: 15px;
      font-size: 12px;
      padding: unset;
      &::after{
        border: unset;
      }
    }
  }
  .tabs-box{
    /deep/ .van-hairline--top-bottom::after{
      border-width: 0;
    }
  }
}
</style>
